<template>
  <div class="app-container">
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="6" :xs="24">-->
    <!--        <el-card class="box-card">-->
    <!--          <template v-slot:header>-->
    <!--            <div class="clearfix">-->
    <!--              <span>个人信息</span>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--          <div>-->
    <!--            &lt;!&ndash;            <div class="text-center">&ndash;&gt;-->
    <!--            &lt;!&ndash;              <userAvatar/>&ndash;&gt;-->
    <!--            &lt;!&ndash;            </div>&ndash;&gt;-->
    <!--            <ul class="list-group list-group-striped">-->
    <!--              <li class="list-group-item">-->
    <!--                <svg-icon icon-class="user"/>-->
    <!--                用户名称-->
    <!--                <div class="pull-right">{{ state.user.name }}</div>-->
    <!--              </li>-->
    <!--              <li class="list-group-item">-->
    <!--                <svg-icon icon-class="phone"/>-->
    <!--                手机号码-->
    <!--                <div class="pull-right">{{ state.user.phonenumber }}</div>-->
    <!--              </li>-->
    <!--              <li class="list-group-item">-->
    <!--                <svg-icon icon-class="email"/>-->
    <!--                用户邮箱-->
    <!--                <div class="pull-right">{{ state.user.email }}</div>-->
    <!--              </li>-->
    <!--              <li class="list-group-item">-->
    <!--                <svg-icon icon-class="tree"/>-->
    <!--                所属社团-->
    <!--                <div v-if="state.user.dept" class="pull-right">{{ state.user.dept.deptName }}-->
    <!--                </div>-->
    <!--              </li>-->
    <!--              <li class="list-group-item">-->
    <!--                <svg-icon icon-class="peoples"/>-->
    <!--                所属角色-->
    <!--                <div class="pull-right">{{ state.roleGroup }}</div>-->
    <!--              </li>-->
    <!--              <li class="list-group-item">-->
    <!--                <svg-icon icon-class="date"/>-->
    <!--                创建日期-->
    <!--                <div class="pull-right">{{ state.user.createTime }}</div>-->
    <!--              </li>-->
    <!--            </ul>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--      <el-col :span="18" :xs="24">-->
    <!--        <el-card>-->
    <!--          <template v-slot:header>-->
    <!--            <div class="clearfix">-->
    <!--              <span>基本资料</span>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--          <el-tabs v-model="activeTab">-->
    <!--            <el-tab-pane label="基本资料" name="userinfo">-->
    <!--              <userInfo :user="state.user"/>-->
    <!--            </el-tab-pane>-->
    <!--            <el-tab-pane label="修改密码" name="resetPwd">-->
    <!--              <resetPwd/>-->
    <!--            </el-tab-pane>-->
    <!--          </el-tabs>-->
    <!--        </el-card>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <div style="display: flex;">
      <el-row gutter="20">
        <el-col :span="12">
          <div style="display: flex;flex-direction: column;">

            <el-card class="box-card" style="margin-bottom: 20px">
              <template v-slot:header>
                <div class="clearfix">
                  <span>个人信息</span>
                </div>
              </template>

              <el-descriptions
                  :column="2"
                  border
                  direction="vertical"
              >
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <svg-icon icon-class="user"/>
                      用户名称
                    </div>
                  </template>
                  {{ state.user.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <svg-icon icon-class="phone"/>
                      手机号码
                    </div>
                  </template>
                  {{ state.user.phonenumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <svg-icon icon-class="email"/>
                      用户邮箱
                    </div>
                  </template>
                  {{ state.user.email }}
                </el-descriptions-item>
                <el-descriptions-item v-if="state.user.dept">
                  <template #label>
                    <div class="cell-item">
                      <svg-icon icon-class="tree"/>
                      所属社团
                    </div>
                  </template>
                  <el-tag size="small">{{ state.user.dept.deptName }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="所属角色">
                  <template #label>
                    <div class="cell-item">
                      <svg-icon icon-class="peoples"/>
                      所属角色
                    </div>
                  </template>
                  {{ state.roleGroup }}
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                  <template #label>
                    <div class="cell-item">
                      <svg-icon icon-class="date"/>
                      创建时间
                    </div>
                  </template>
                  {{ state.user.createTime }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-card>
              <template v-slot:header>
                <div class="clearfix">
                  <span>基本资料</span>
                </div>
              </template>
              <el-tabs v-model="activeTab">
                <el-tab-pane label="基本资料" name="userinfo">
                  <userInfo :user="state.user"/>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="resetPwd">
                  <resetPwd/>
                </el-tab-pane>
              </el-tabs>
            </el-card>

          </div>
        </el-col>
        <el-col :span="12">

          <el-card style="display: flex;justify-content: center;align-items: center;height: 24%;margin-bottom: 20px">
            <div style="">
              <span>欢迎使用社团管理系统</span>
            </div>
          </el-card>

          <div style="border: 1px solid #ebeef5;height: 50%">
            <el-calendar ref="calendar">
              <template #header="{ date }">
                <span>{{ date }}</span>
                <el-button-group>
                  <el-button size="small" @click="selectDate('prev-month')">
                    Previous Month
                  </el-button>
                  <el-button size="small" @click="selectDate('today')">Today</el-button>
                  <el-button size="small" @click="selectDate('next-month')">
                    Next Month
                  </el-button>
                </el-button-group>
              </template>
            </el-calendar>
          </div>
        </el-col>
      </el-row>

    </div>


  </div>
</template>

<script name="Profile" setup>
import userInfo from '@/views/system/user/profile/userInfo'
import resetPwd from '@/views/system/user/profile/resetPwd'
import {getUserProfile} from '@/api/system/user'

// const iconStyle = computed(() => {
//   const marginMap = {
//     large: '8px',
//     default: '6px',
//     small: '4px',
//   }
//   return {
//     marginRight: marginMap[size.value] || marginMap.default,
//   }
// })

const activeTab = ref('userinfo')
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
})

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data.user
    state.roleGroup = response.data.roleGroup
  })
}

getUser()
</script>
